<template>
<view class="content">
	<view class="title">
		<view class="title-left">
			<view class="title-left-head">绿港云平台，我们全力保护你的数据安全</view>
			<view class="title-left-tip">
				数据安全是我们工作的重中之重，我们在所有产品，服务和基础架构内构建了安全防护，确保每个层面的数据安全。
			</view>
		</view>
		<image src="@/static/user/safe.png" mode="aspectFill" class="image" />
	</view>
	<up-gap height="15" bgColor="#F3F4F5"></up-gap>
	<u-cell-group :border="false">
		<u-cell title="手机号码" size="large">
			<template #value>
				<view>
					<text>{{ hidePhone(userInfo.phone) }}</text>
					<text class="change-btn" @click.stop="changePhone">更换</text>
				</view>
			</template>
		</u-cell>
		<u-cell title="密码" :isLink="true" size="large" value="已设置" @click="editPWD()"></u-cell>
	</u-cell-group>
</view>
</template>

<script>
import tabbar from '@/components/home-tabbar/index.vue'
import { useUserStore,useLoginStore } from "@/pinia-store/user.js"
import { mapStores } from 'pinia'

export default {
	components: {
		tabbar
	},
	data() {
		return {
			modalShow: false,
			userInfo: {}
		}
	},
	onLoad(option) {
		if (option.flag) {//说明修改密码回来的
			this.loginOut();
		}
		this.userInfo = this.userStore.user;
	},
	computed: {
		...mapStores(useUserStore, useLoginStore)
	},
	methods: {
		hidePhone(phone) {
			return phone.substring(0, 3) + '****' + phone.substring(7);
		},
		editPWD() {
			uni.navigateTo({
				url: '/pages/user/pwd?workerId=' + this.userStore.user.worker_id
			});
		},
		changePhone() {
			uni.navigateTo({
				url: '/pages/user/changePhone'
			});
		}
	}
}
</script>

<style lang="scss">
.content {
	height: calc(100vh - 88rpx - var(--status-bar-height));
}

.title {
	display: flex;
	padding: 60rpx 30rpx;
}

.title-left {
	width: 68vw;
}

.image {
	width: 28vw;
	height: 28vw;
	margin-left: 2vw;
}

.title-left-head {
	font-weight: bold;
	font-size: 32rpx;
	padding-bottom: 20rpx;
}

.title-left-tip {
	font-size: 28rpx;
	color: #999;
}

.change-btn {
	color: #2979ff;
	font-size: 28rpx;
	margin-left: 20rpx;
}
</style>